<main class="flex-1 overflow-y-auto">
    <!-- Primary column -->
    <section class="max-w-5xl mx-auto p-12">
        <div>
           <div class="flex flex-row">
              <div class="hidden md:flex flex-col items-center">
                 <div class="w-32 py-5 border bg-blue-200 border-blue-200 rounded mr-4 uppercase flex flex-col items-center justify-center">
                    <div class="text-lg font-black text-blue-500">Step 1</div>
                    <div class="text-blue-500 text-xs">Choose a stack</div>
                 </div>
                 <div class="h-full border-l-4 border-transparent">
                    <div class="border-l-4 mr-4 h-full border-gray-300 border-dashed"></div>
                 </div>
              </div>
              <div class="flex-auto rounded bg-white">
                 <div class="flex md:flex-row flex-col items-center">
                    <div class="flex-auto">
                       <div class="pl-3 text-sm text-chillgray-500 m-auto">Click from the list or search a stack for your project, hit Install</div>
                    </div>
                    <div class="md:w-96 w-full p-5"><img src="img/xxx.png" alt="step 1" class="object-scale-down"></div>
                 </div>
              </div>
           </div>
           <div class="flex items-start flex-row">
              <div class="border-t-4 border-r-4 border-transparent">
                 <div class="w-16 ml-16 h-16 border-l-4 border-gray-300 border-dashed border-b-4 rounded-bl-full"></div>
              </div>
              <div class="border-t-4 border-transparent flex-auto">
                 <div class="h-16 border-b-4 border-gray-300 border-dashed"></div>
              </div>
              <div class="w-16 mt-16 mr-16 h-16 border-r-4 border-gray-300 border-dashed border-t-4 rounded-tr-full"></div>
           </div>
           <div class="flex flex-row-reverse">
              <div class="hidden md:flex flex-col items-center">
                 <div class="w-32 py-5 border border-indigo-200 bg-indigo-200 rounded ml-4 uppercase flex flex-col items-center justify-center">
                    <div class="text-lg font-black text-indigo-500">Step 2</div>
                    <div class="text-indigo-500 text-xs">Add details</div>
                 </div>
                 <div class="h-full border-r-4 border-transparent">
                    <div class="border-l-4 ml-4 h-full border-gray-300 border-dashed"></div>
                 </div>
              </div>
              <div class="flex-auto rounded bg-white">
                 <div class="flex md:flex-row flex-col items-center">
                    <div class="flex-auto">
                       <div class="pl-3 text-sm text-chillgray-500 m-auto">Enter project name, path and other informations and hit save.</div>
                    </div>
                    <div class="md:w-96 w-full p-5"><img src="img/xxx2.png" alt="step 2" class="object-scale-down"></div>
                 </div>
              </div>
           </div>
           <div class="flex items-start flex-row-reverse">
              <div class="border-t-4 border-l-4 border-transparent">
                 <div class="w-16 mr-16 h-16 border-r-4 border-gray-300 border-dashed border-b-4 rounded-br-full"></div>
              </div>
              <div class="border-t-4 border-transparent flex-auto">
                 <div class="h-16 border-b-4 border-gray-300 border-dashed"></div>
              </div>
              <div class="w-16 mt-16 ml-16 h-16 border-l-4 border-gray-300 border-dashed border-t-4 rounded-tl-full"></div>
           </div>
           <div class="flex flex-row">
              <div class="hidden md:flex flex-col items-center">
                 <div class="w-32 py-5 border border-green-200 bg-green-200 rounded mr-4 uppercase flex flex-col items-center justify-center">
                    <div class="text-lg font-black text-green-500">Step 3</div>
                    <div class="text-green-500 text-xs">Start project</div>
                 </div>
                 
              </div>
              <div class="flex-auto rounded bg-white">
                 <div class="flex md:flex-row flex-col items-center">
                    <div class="flex-auto">
                       <div class="pl-3 text-sm text-chillgray-500 m-auto">
                           Start your project from the list, it might take a few minutes to finish
                       </div>
                    </div>
                    <div class="md:w-96 w-full p-5"><img src="img/xxx3.png" alt="step 3" class="object-scale-down"></div>
                 </div>
              </div>
           </div>
           
           
        </div>
     </section>
</main>
